<template>
	<view class="activity-container">
		<u-sticky>
			<Header :leftTitlePrimary="pageName"></Header>
			<view class="classify-container">
				<view class="search-container">
					<u-search v-model="queryParams.activityTitle" placeholder="请输入关键字搜索" height="65rpx"
						bgColor="#f4f5f9" searchIconColor="#181818" :showAction="false" clearabled
						@clear="handleQuery()" @search="handleQuery()"></u-search>
				</view>
				<view class="classify-wrapper" @click="showTab = true">
					<text>活动类型</text>
					<u-icon name="arrow-down-fill" size="12px" color="#aeaeae"></u-icon>
				</view>
			</view>
		</u-sticky>
		<view class="activity-wrapper">
			<view class="activity-items" v-for="(item,index) in activityList" :key="index">
				<u-image :src="item.imgUrl" width="100%" height="330rpx" radius="10px" :lazy-load="true"></u-image>
				<u--text :text="item.title" size="16" color="#181818" margin="10px 0px"></u--text>
			</view>
			<Loadmore :isMore="true"></Loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: '活动',
				queryParams: {
					pageNum: 1,
					pageSize: 12,
					keywords: null
				},
				activityList: [{
					title: "【有奖活动】阅见美好 | 阅读打卡活动",
					imgUrl: "https://s3.bmp.ovh/imgs/2024/05/29/0685e085ff2babf9.png",
					status: ""
				}, {
					title: "「悦享图书漂流站」| 图书漂流活动",
					imgUrl: "https://s3.bmp.ovh/imgs/2024/05/29/e008a2a58cfde43e.png",
					status: ""
				}, {
					title: "书海千里，江山有声",
					imgUrl: "https://s3.bmp.ovh/imgs/2024/05/29/20fb4f3536ba2edc.png",
					status: ""
				}],
			};
		},
		created() {

		},
		methods: {

		}
	};
</script>

<style lang="scss">
	.activity-container {

		.classify-container {
			@include flex(space-between, center);
			padding: 10px 15px;
			background-color: #ffffff;

			.search-container {
				width: 75%;
			}

			.classify-wrapper {
				@include flex($align: center);

				text {
					color: #888888;
					font-size: 14px;
					margin-right: 3px;
				}
			}
		}

		.search-wrapper {
			@include flex(space-between, center);
			padding: 10px 15px;
			background-color: #ffffff;

			.scan {
				margin-left: 10px;
			}
		}

		.activity-wrapper {
			position: relative;
			z-index: -1;
			min-height: 100vh;
			background-color: $old-bg-color;
		}

		.activity-items {
			margin-bottom: 10px;
			padding: 10px 10px 10px;
			background-color: #ffffff;
		}
	}
</style>